<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ajax_小试牛刀</title>
	</head>
	<body>
		<h2>该页面练习：一个简单的ajax请求</h2>
		<button onclick="getHello()">获取欢迎信息</button>
		<div id="content"></div>
		
		<script type="text/javascript" >
				function getHello(){
					//创建一个XMLHttpRequest的实例对象 —— 找来一个帮我们发请求的人
					const xhr = new XMLHttpRequest()
					//绑定监听
					/* 
						on：当？？时候
						ready：准备
						state: 状态
						change：改变
						xhr有一个readyState属性，该属性有5种值，分别为：
								0：xhr在被创建出来那一刻状态就是0。
								1：xhr调用完open后状态就变为1。
								2：xhr调用完send后状态就变为2。
								3：xhr接收完部分响应数据了（若数据较小会在此阶段接收完毕，若数据大有待进一步接收）。
								4：xhr接收完全部响应数据了
					*/
					xhr.onreadystatechange = ()=>{
						if(xhr.readyState === 4 ){
							if(xhr.status >= 200 && xhr.status <=299){
								console.log('数据回来了',xhr.response,xhr.status)
								const content = document.getElementById('content')
								content.innerText = xhr.response
							}
						}
					}

					//指定发送请求的：方式、地址
					xhr.open('GET','http://127.0.0.1:5000/hello')
					//发送请求
					xhr.send()
				}
		</script>
	</body>
</html>